<template>
  <a-modal
    title="菜单操作"
    :mask-closable="false"
    :centered="true"
    v-model="visible"
    :okButtonProps="{ props: { disabled: isDisabled } }"
    @ok="handleSubmit">
  
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" >
      <a-form-item style="display:none">
        <a-input v-decorator="['id']"/>
      </a-form-item>
      <a-form-item style="display:none">
        <a-input v-decorator="['sort']"/>
      </a-form-item>
      <a-form-item label="菜单类型">
        <a-radio-group v-decorator="['menuType',{initialValue:'M'}]" buttonStyle="solid" @change="menuTypeChange">
          <a-radio-button value="M">菜单</a-radio-button>
          <a-radio-button value="B">按钮</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="菜单名称">
        <a-input
          v-decorator="['meta.title', { rules: [{ required: true,message: '请输入菜单名称' },{max:20,message: '不能超过20个字符！'}] }]"
        />
      </a-form-item>
      <a-form-item label="上级菜单">
        <a-tree-select
          v-decorator="['parentId', {rules: [{ required: true, message: '请选择上级权限' }]}]"
          :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
          :treeData="menus"
          placeholder="请选择上级菜单"
          treeDefaultExpandAll
          treeDataSimpleMode
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item v-if="menuType!=='B'" label="图标">
        <a-input v-decorator="['meta.icon',{rules: [{ required: false, message: '请选择图标' }]}]" ref="iconInput" @click="iconSelect()" enterButton="选择图标" placeholder="选择图标">
          <a-icon slot="prefix" :type="icon" />
          <a-icon slot="suffix" type="close-circle" @click="emitEmpty"/>
        </a-input>
      </a-form-item>
      <a-form-item v-if="menuType!=='B'" label="路由标识" >
        <a-input
          v-decorator="['name', { rules: [{ required: true,message: '请输入菜单路由标识,如：user'},{max:20,message: '不能超过20个字符！'}] }]"
        />
      </a-form-item>
      <a-form-item v-if="menuType!=='B'" label="组件名称" >
        <a-input
          v-decorator="['component', { rules: [{ required: true,message: '请输入组件标识，如：UserList'},{max:20,message: '不能超过20个字符！'}] }]"
        />
      </a-form-item>
      <a-form-item v-if="menuType!=='B'" label="重定向地址" >
        <a-input
          v-decorator="['redirect', { rules: [{message: '请输入重定向地址'},{max:20,message: '不能超过100个字符！'}] }]"
        />
      </a-form-item>
      <a-form-item v-if="menuType!=='B'" label="打开方式" >
        <a-radio-group v-decorator="['meta.target',{initialValue:''}]" buttonStyle="solid">
          <a-radio-button value="">当前窗口</a-radio-button>
          <a-radio-button value="_blank">新窗口</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="显示">
        <a-switch v-decorator="['meta.show', { initialValue:true,valuePropName: 'checked' }]" checkedChildren="开" unCheckedChildren="关" />
      </a-form-item>
      <a-form-item v-if="menuType!=='M'" label="权限标识" >
        <a-input
          v-decorator="['permis', { rules: [{message: '请输入权限标识'},{max:20,message: '不能超过20个字符！'}] }]"
        />
      </a-form-item>
    </a-form>
    <iconSelector-modal ref="modal" @ok="setIcon" :icon="icon"/>
  </a-modal>
</template>

<script>
    import { axios } from '../../utils/request'
    import IconSelectorModal from './IconSelectorModal'
    export default {
        name: 'MenuModal',
        components: {
          IconSelectorModal
        },
        created() {
             // 更新上级树菜单
             this.loadMenus()
        },
        data () {
          return {
            visible: false,
            form: this.$form.createForm(this),
            menus: [],
            menuType:'',
            icon: 'smile',
            mdl: {},
            isDisabled: false
          }
        },
        methods: {
          add () {
            this.visible = true
            this.isDisabled = false
            this.menuType='M'
            this.form.resetFields()
          },
          edit (record){
           // this.mdl = Object.assign({}, record)
            this.menuType = record.menuType
            this.visible = true
            this.isDisabled = false
            this.$nextTick(() => {
              /*   this.form.setFieldsValue(pick(this.mdl, 'id', 'parentId', 'name', 'component', 'redirect', 'menuType', 'permis',
                   'sort', 'meta.icon', 'meta.title', 'meta.show', 'meta.target'))
                 this.form.setFieldsValue({ ...record })*/
              this.form.setFieldsValue({
                'id': record.id,
                'parentId': record.parentId,
                'name': record.name,
                'component': record.component,
                'redirect': record.redirect,
                'menuType': record.menuType,
                'permis':record.permis,
                //'sort':record.sort,
                'meta.icon':record.meta.icon,
                'meta.title':record.meta.title,
                'meta.show':record.meta.show,
                'meta.target':record.meta.target
              })
            })
          },
          iconSelect () {
            this.$refs.modal.show()
          },
          setIcon (icon) {
            this.icon = icon
            this.form.setFieldsValue({ 'meta.icon': icon })
          },
          emitEmpty () {
            this.$refs.iconInput.focus()
            this.form.setFieldsValue({ 'icon': '' })
          },
          loadMenus(){
             axios.get('/menu/listMMenu').then((response)=>{
               if (response.code == 200) {
                    this.menus = response.result

               } else {
                 this.$message.error(response.msg)
               }
             })
          },
          menuTypeChange (e) {
            this.menuType = e.target.value
          },
          handleSubmit (e) {
            e.preventDefault()
            this.form.validateFields((err, values) => {
              if (!err) {
                 axios.post(values.id>0?'/menu/update':'menu/add',values).then((response=>{
                    if(response.code==200){
                      this.isDisabled = false
                      this.$emit('ok')
                      this.visible = false
                    }else{
                      this.$message.error(response)
                    }
                 }))
              }else{
                this.$message.error('页面提交错误，刷新页面重新提交！')
                this.isDisabled = true
              }
            })
          }
        }
    }
</script>

<style scoped>
  .ant-form-item{
    margin-bottom: 15px;
  }
</style>
